<template>
	<view class="login_page">
		<view class="login_content" v-if="loginStep == 0">
			<view class="login_content_title">
				恒星计划
			</view>
			<view class="login_content_subTitle">
				出发，是一个非常动听的词语
			</view>
			<view class="login_btn">
				<!-- 微信授权登录 -->
				手机号登录
			</view>
		</view>
		<view class="phone_login" v-if="loginStep == 1">
			<view class="phone_login_title">
				手机登录
			</view>
			<input type="number" name="" id="" placeholder="手机号" v-model="phoneNumber" class="phone_input">
			<view class="verification_code">
				<input type="number" name="" id="" v-model="smsCode" placeholder="验证码">
				<view class="code_btn" @tap="sendCode">
					{{countDown == 60?'发送验证码':`${countDown}s`}}
				</view>
			</view>
			<view class="phone_login_btn" @tap="loginFn">
				登录
			</view>
		</view>
		<view class="login_tips">
			<view class="select" :class="[`${ifSelect?'select_ed':''}`]" @tap="ifSelect = !ifSelect">

			</view>
			<text>我已阅读并同意<text class="agreement">《用户协议》</text>和<text class="agreement">《隐私协议》</text></text>
		</view>
	</view>
</template>

<script setup>
	import {
		useStore
	} from '@/store/user';
	import JSEncrypt from 'jsencrypt';
	import {
		inject
	} from 'vue';
	const toast = inject("toast")
	import {
		apiSendCode,
		apiLogin
	} from "@/requestApi/login.js";
	import {
		ref
	} from 'vue';
	const loginStep = ref(1)
	const phoneNumber = ref()
	const countDown = ref(60)
	const smsCode = ref('')
	const ifSelect = ref(false)
	const sendCode = () => {
		if (countDown.value != 60) {
			toast('发送短信时间不能少于60秒')
			return
		}
		apiSendCode({
			phoneNumber: phoneNumber.value
		}).then(res => {
			if (res.code == 1) {
				countDownFn()
			}
			console.log(res)
		})
	}
	let countDownTimer = null
	const countDownFn = () => {
		clearInterval(countDownTimer)
		countDownTimer = setInterval(() => {
			countDown.value--;
			if (countDown.value == 0) {
				countDown.value = 60
				clearInterval(countDownTimer)
			}
		}, 1000)
	}
	const loginFn = () => {
		if (!ifSelect.value) {
			toast('请先阅读并同意用户协议和隐私协议')
			return
		}
		if (!smsCode.value) {
			toast('短信验证码不能为空')
			return
		}
		const loginQuery = {
			loginType: "SMS_CODE",
			phoneNumber: phoneNumber.value,
			smsCode: smsCode.value,
			timestamp: new Date().getTime()
		}

		const queryString = Object.keys(loginQuery)
			.map(key => `${key}=${encodeURIComponent(loginQuery[key])}`)
			.join('&');
		console.log(queryString)
		loginQuery.authorizationCheck = encryptData(queryString)
		apiLogin(loginQuery).then(res => {
			if (res.code == 1) {
				useStore.setToken(res.data.encTok)
				uni.setStorageSync("token", res.data.encTok)
				uni.switchTab({
					url: '/pages/plan/main',
				});
			} else {
				toast('登录失败~')
			}

		}).catch(err => {
			console.log(err, 'err')
		})
		console.log(loginQuery)
		return

	}
	const encryptData = (queryString) => {
		const publicKey =
			'MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAqcx4tkMZqaHeL/VX17tCnkMkVr9sasZqG3lI112jNco6n3cwfnyMEw414FaAd52XRjF2DWrmHSeuyQtybo4dLC4/nvGpbyVaXmaV5s+3JrBzIQOcKNWmvmycnuiISX2M7a6PrGazmZUWoGDrlBIiywfJGGB1d7gi7Q0+tvW9d5pXJ9jsIUyYyYXb95LvFI5XFrTMIfCsFv5jjjqbUZkEWwMW/LGSEntyfjkJHTWHZBAw4JRpRS8gw/DfyjIxNfQ3C1ql2+N7NyJoqqJPcJnEc5yT60kBoFhDdg3uX2UvBiax2E6UPbiqsdrl6EizGdiIDY+n54pt3a0qDNstnnJBVwIDAQAB';
		const encrypt = new JSEncrypt();
		encrypt.setPublicKey(publicKey);
		const encryptedData = encrypt.encrypt(queryString);
		console.log('加密后的数据:', encryptedData);
		return encryptedData
	}
	// 页面切换动画
</script>

<style lang="less" scoped>
	.login_page {
		position: relative;
		height: 100vh;
		background-image: url("@/static/login/login_bg.jpg");
		background-size: 100% 1028rpx;
		background-color: #FFFFFF;
		background-repeat: no-repeat;

		.login_content {
			position: absolute;
			bottom: 0;
			left: 0;
			padding-top: 66rpx;
			padding-left: 48rpx;
			width: 100vw;
			height: 516rpx;
			background: #FFFFFF;

			&_title {
				font-size: 64rpx;
				font-weight: 300;
				letter-spacing: -0.64rpx;
				color: #000000;
			}

			&_subTitle {
				padding-top: 58rpx;
				font-size: 32rpx;
				color: #6C757D;
			}

			.login_btn {
				margin-top: 158rpx;
				border-radius: 32rpx;
				background-color: #000000;
				width: 652rpx;
				height: 110rpx;
				line-height: 110rpx;
				font-size: 32rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				color: #ffffff;
				text-align: center;
				vertical-align: top;

			}
		}

		.phone_login {
			display: flex;
			flex-direction: column;
			justify-content: end;
			position: absolute;
			top: 0;
			left: 0;
			width: 750rpx;
			height: 1288rpx;
			background: linear-gradient(0deg, rgba(255, 252, 252, 1) 30%, rgba(255, 252, 252, 0.73) 50.5%, rgba(255, 252, 252, 0.33) 71.04%, rgba(255, 252, 252, 0.17) 83.55%, rgba(255, 252, 252, 0) 100%);

			.phone_login_title {
				padding-left: 84rpx;
				margin-bottom: 58rpx;
				font-size: 48rpx;
				font-weight: 300;
				letter-spacing: -0.64rpx;
				color: rgba(0, 0, 0, 1);
			}

			.phone_input {

				padding-left: 50rpx;
				box-sizing: border-box;
				margin: 0 auto 48rpx;
				width: 652rpx;
				height: 96rpx;
				opacity: 1;
				border-radius: 20rpx;
				background: rgba(247, 250, 252, 1);

				border: 1.6px solid rgba(32, 32, 37, 1);


			}

			.verification_code {
				margin: 0 auto;
				padding: 0 50rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 652rpx;
				height: 96rpx;
				opacity: 1;
				border-radius: 20rpx;
				background: rgba(247, 250, 252, 1);

				.code_btn {
					text-align: center;
					width: 238rpx;
					height: 72rpx;
					font-size: 32rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 72rpx;
					color: rgba(33, 37, 41, 1);
					vertical-align: top;
					opacity: 1;
					border-radius: 12rpx;
					background: rgba(255, 255, 255, 1);

				}
			}

			.phone_login_btn {
				margin: 0 auto;
				margin-top: 158rpx;
				border-radius: 32rpx;
				background-color: #000000;
				width: 652rpx;
				height: 110rpx;
				line-height: 110rpx;
				font-size: 32rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				color: #ffffff;
				text-align: center;
				vertical-align: top;
			}
		}

		.login_tips {
			display: flex;
			align-items: center;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 92rpx;

			.select {
				margin-right: 14rpx;
				width: 28rpx;
				height: 28rpx;
				opacity: 1;
				border-radius: 50%;

				border: 2rpx solid rgba(32, 32, 37, 1);
			}

			.select_ed {
				background-image: url('../../static/fabu_radio_selected.png');
				background-size: 100% 100%;
			}



			text {
				font-size: 24rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 33rpx;
				color: rgba(0, 0, 0, 1);
				white-space: nowrap;
			}

			.agreement {
				color: rgba(50, 100, 237, 1);
			}
		}
	}
</style>